<template>
  <Card :shadow="shadow">
    <div class="card-name"><div class="name width1">新建用户</div></div>
    <div class="content-con">
      <Form ref="formValidate" :model="formValidate" label-position="right" :label-width="110" class="user-item">
        <Form-item label="用户名" prop="account">
          <Row>
            <i-col span="10"><i-input v-model="formValidate.account" size="large" placeholder="请输入用户名"></i-input></i-col>
          </Row>
        </Form-item>
        <Form-item label="用户昵称" prop="real_name">
          <Row>
            <i-col span="10"><i-input v-model="formValidate.real_name" size="large" placeholder="请输入用户昵称"></i-input></i-col>
          </Row>
        </Form-item>
        <Form-item label="登录密码" prop="pwd">
          <Row>
            <i-col span="10"><i-input v-model="formValidate.pwd" placeholder="不修改请留空" type="password" size="large"></i-input></i-col>
            <i-col span="14"><span class="user-right">请填写6到12位密码</span></i-col>
          </Row>
        </Form-item>
        <Form-item label="超级密码" prop="sp_pwd">
          <Row>
            <i-col span="10"><i-input v-model="formValidate.sp_pwd" placeholder="不修改请留空" type="password" size="large"></i-input></i-col>
            <i-col span="14"><span class="user-right">请填写6到12位超级密码</span></i-col>
          </Row>
        </Form-item>
        <Form-item label="角色选择" prop="roles">
          <Row>
            <i-col span="10">

            <Select multiple v-model="formValidate.roles" :max-tag-count='3'>
                      <Option v-for="(item,index) in rolesData" :value="item.id" :key="index">{{ item.role_name }}</Option>
                  </Select>
            </i-col>
          </Row>
        </Form-item>
        <Form-item label="超级管理" prop="level">
          <Row>
            <i-col span="10">
              <Radio-group v-model="formValidate.level" size="large">
                <Radio label="0"><span>是</span></Radio>
                <Radio label="1"><span>否</span></Radio>
              </Radio-group>
            </i-col>
            <i-col span="14"><span class="user-right">超管拥有所有菜单权限</span></i-col>
          </Row>
        </Form-item>
        <Form-item label="状态" prop="status">
          <Radio-group v-model="formValidate.status" size="large">
            <Radio label="1"><span>启用</span></Radio>
            <Radio label="0"><span>停止</span></Radio>
          </Radio-group>
        </Form-item>
        <div class="ban-btn">
          <i-button class="save" size="large" @click="btnClick1">返回</i-button>
          <i-button @click="handleSubmit()" class="save" size="large">保存</i-button>
        </div>
      </Form>
    </div>
  </Card>
</template>
<script>
import { saveAdmin, getRoleList } from '@/api/user'
import { mapMutations } from 'vuex'
import selectTree from 'iview-select-tree'
export default {
  name: 'user-edit',
  components: {
    selectTree
  },
  props: {
    shadow: {
      type: Boolean,
      default: false
    }
  },
  data () {
    return {
		 formValidate: {
        id: this.$route.params.row.id,
		   account: this.$route.params.row.account,
		   real_name: this.$route.params.row.real_name,
		   pwd: '',
		   sp_pwd: '',
		   level: this.$route.params.row.level.toString(),
		   status: this.$route.params.row.status.toString(),
        roles: JSON.parse(this.$route.params.row.rulesJson)
		 },
      rolesData: [],
      a: []
    }
  },
  mounted () {
    this.getRoles()
  },
  methods: {
    ...mapMutations(['closeTag']),
    close () {
      this.closeTag({
        name: 'user-edit',
        params: {
          row: this.$route.params.row
        }
      })
    },
    getRoles () {
      let data = {
        keyword: '',
        pageCurrent: 1,
        pageSize: 50
      }

      getRoleList(data)
        .then(res => {
          this.rolesData = res.data.data
        })
        .catch(err => {
          this.$message.error(err.msg)
        })
    },
    // 返回按钮
    btnClick1 () {
      this.close()
    },
	 // 表单验证
	 handleSubmit () {
	   this.$refs['formValidate'].validate((valid) => {
	     if (valid) {
          saveAdmin(this.formValidate)
            .then(res => {
              this.$Message.success(res.msg)
              setTimeout(() => this.close(), 1000)
            }).catch(err => {
              this.$Message.error(err.msg)
            })
	     } else {
	       this.$Message.error('表单验证失败!')
	     }
	   })
	 }

  }
}
</script>
<style lang="less">
.user-item .ivu-form-item-label {
  font-size: 14px;
}
.user-right {
  margin-left: 15px;
  color: #999;
  font-size: 14px;
  height: 36px;
  line-height: 20px;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
}
</style>
